<template>
    <el-card class="box-card">
    <div slot="header" class="clearfix">
        <span class="clearfixtable"><span class="colorblock"></span>一周数据指标</span>
        <Mysearch @parentExport = "parentExport"/>
    </div>
      <template>
    <el-table
      :data="this.message"
      style="width: 100%">
      <el-table-column
        label="日期">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="室外温度">
        <template slot-scope="scope">{{ scope.row.OutdoorTemperature }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="室内温度">
        <template slot-scope="scope">{{ scope.row.indoorTemperature }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="室外湿度">
        <template slot-scope="scope">{{ scope.row.indoorHumidity }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="室内湿度">
        <template slot-scope="scope">{{ scope.row.OutdoorHumidity }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="光照强度">
        <template slot-scope="scope">{{ scope.row.LightIntensity }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="氮">
        <template slot-scope="scope">{{ scope.row.nitrogen }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="磷">
        <template slot-scope="scope">{{ scope.row.phosphorus }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="钾">
        <template slot-scope="scope">{{ scope.row.potassium }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="CO2">
        <template slot-scope="scope">{{ scope.row.CO2 }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="PH">
        <template slot-scope="scope">{{ scope.row.EC }}</template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="EC">
        <template slot-scope="scope">{{ scope.row.PH }}</template>
      </el-table-column>
    </el-table>
  </template>
    <mydialog @parentSearch="parentSearch"/>
    </el-card>
</template>

<script>
import eventBus from "../../../utils/eventBus"
import Mysearch from "./Mysearch.vue"
import Mydialog from "./Mydialog.vue"
import {getOutdoorTempApi} from "../../../api/detaiApi"
import { export_json_to_excel } from '../../../utils/Export2Excel'
export default {

    components:{
        Mysearch,
        Mydialog
    },
    data() {
        return {
          message:[],
          keyword:''
        }
    },
    methods:{
       formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                return v[j]
            }))
        },
      parentExport(){
        const tHeader = ['日期','室外温度','室内温度','室外湿度','室内湿度','光照强度','氮','磷','钾','CO2','PH','EC']
        const filterVal =['date','indoorTemperature','OutdoorTemperature','indoorHumidity','OutdoorHumidity','LightIntensity',
        'nitrogen','phosphorus','potassium','CO2','EC','PH'];
        getOutdoorTempApi({keyword:''}).then(res=>{
          const data = this.formatJson(filterVal,res.data)
            	export_json_to_excel({
    		          header: tHeader,//excel头部列表
                  data,//数据
                  filename: '测试文件',//文件名称
                  autoWidth: true,//自适应宽
                  bookType: 'xlsx'//文件类型
    		     })

        })
      },
      parentSearch(val){
        // console.log(val);
        this.keyword = val;
        this. initGetData()
      },
      initGetData(){
        getOutdoorTempApi({keyword:this.keyword}).then(res=>{
          if(res.code==200){
            console.log(res);
            this.message  = res.data;
            eventBus.$emit("message",this.message)
          }
        })
      }
    },
    mounted(){
      this. initGetData();
    }
}
</script>

<style lang="less" scoped>
// 表格的样式
  .el-table {
      /deep/thead{
          
          color: #415276;
          font-weight: 600;
          font-size: 16px;
          
        }
        /deep/.cell{
              text-align: center;
        }
        /deep/ th.el-table__cell {
            background-color: #EFF3F9;
        }
  }

//上面搜索的样式
  .box-card[data-v-592f2c46] {
      width: 100%;
      border-radius: 15px;
  }
  
  .text {
    font-size: 14px;
  }

  .item {
      
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .clearfix{
      display: flex;
      align-items: center;
  }
  .clearfixtable{
      display: flex;
      align-items: center;
      flex: 1;
      color: #425475;
      font-size: 16px;
      font-weight: 600;
  }
  .colorblock{
      display: block;
      width: 8px;
      height: 22px;
      background-color: #526EFE;
      margin-right: 12px;
      margin-left: 28px;
  }
  .box-card {
    width: 480px;
  }
</style>